home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Calenders / dynamic-calendar2.izs < prev    next >
Text File  |  2005-08-31  |  12KB  |  386 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Dynamic Calendar II
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7<!/BROWSER>
  7.  
  8. <!DESCRIPTION>An extremely versatile DHTML calendar that's functional in IE4+ and NS6+.
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>calenders<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <!-- Step 1: Insert the below into the <head> section of your page: -->
  16. <script language="JavaScript">
  17.  
  18. /*
  19. Dynamic Calendar II (By Jason Moon at http://www.jasonmoon.net)
  20. Permission granted to Dynamicdrive.com to include script in archive
  21. For this and 100's more DHTML scripts, visit http://dynamicdrive.com
  22. */
  23.  
  24. var ns6=document.getElementById&&!document.all
  25. var ie4=document.all
  26.  
  27. var Selected_Month;
  28. var Selected_Year;
  29. var Current_Date = new Date();
  30. var Current_Month = Current_Date.getMonth();
  31.  
  32. var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
  33. var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
  34.  
  35. var Current_Year = Current_Date.getYear();
  36. if (Current_Year < 1000)
  37. Current_Year+=1900
  38.  
  39.  
  40. var Today = Current_Date.getDate();
  41.  
  42. function Header(Year, Month) {
  43.  
  44.    if (Month == 1) {
  45.    Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
  46.    }
  47.    var Header_String = Month_Label[Month] + ' ' + Year;
  48.    return Header_String;
  49. }
  50.  
  51.  
  52.  
  53. function Make_Calendar(Year, Month) {
  54.    var First_Date = new Date(Year, Month, 1);
  55.    var Heading = Header(Year, Month);
  56.    var First_Day = First_Date.getDay() + 1;
  57.    if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
  58.        ((Days_in_Month[Month] == 30) && (First_Day == 7))) {
  59.       var Rows = 6;
  60.    }
  61.    else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
  62.       var Rows = 4;
  63.    }
  64.    else {
  65.       var Rows = 5;
  66.    }
  67.  
  68.    var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">';
  69.  
  70.    HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>';
  71.  
  72.    HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>';
  73.  
  74.    HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>';
  75.  
  76.    var Day_Counter = 1;
  77.    var Loop_Counter = 1;
  78.    for (var j = 1; j <= Rows; j++) {
  79.       HTML_String += '<tr ALIGN="left" VALIGN="top">';
  80.       for (var i = 1; i < 8; i++) {
  81.          if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {
  82.             if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {
  83.                HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';
  84.             }
  85.             else {
  86.                HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Day_Counter + '</td>';
  87.             }
  88.             Day_Counter++;    
  89.          }
  90.          else {
  91.             HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';
  92.          }
  93.          Loop_Counter++;
  94.       }
  95.       HTML_String += '</tr>';
  96.    }
  97.    HTML_String += '</table></td></tr></table>';
  98.    cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
  99.    cross_el.innerHTML = HTML_String;
  100. }
  101.  
  102.  
  103. function Check_Nums() {
  104.    if ((event.keyCode < 48) || (event.keyCode > 57)) {
  105.       return false;
  106.    }
  107. }
  108.  
  109.  
  110.  
  111. function On_Year() {
  112.    var Year = document.when.year.value;
  113.    if (Year.length == 4) {
  114.       Selected_Month = document.when.month.selectedIndex;
  115.       Selected_Year = Year;
  116.       Make_Calendar(Selected_Year, Selected_Month);
  117.    }
  118. }
  119.  
  120. function On_Month() {
  121.    var Year = document.when.year.value;
  122.    if (Year.length == 4) {
  123.       Selected_Month = document.when.month.selectedIndex;
  124.       Selected_Year = Year;
  125.       Make_Calendar(Selected_Year, Selected_Month);
  126.    }
  127.    else {
  128.       alert('Please enter a valid year.');
  129.       document.when.year.focus();
  130.    }
  131. }
  132.  
  133.  
  134. function Defaults() {
  135.    if (!ie4&&!ns6)
  136.    return
  137.    var Mid_Screen = Math.round(document.body.clientWidth / 2);
  138.    document.when.month.selectedIndex = Current_Month;
  139.    document.when.year.value = Current_Year;
  140.    Selected_Month = Current_Month;
  141.    Selected_Year = Current_Year;
  142.    Make_Calendar(Current_Year, Current_Month);
  143. }
  144.  
  145.  
  146. function Skip(Direction) {
  147.    if (Direction == '+') {
  148.       if (Selected_Month == 11) {
  149.          Selected_Month = 0;
  150.          Selected_Year++;
  151.       }
  152.       else {
  153.          Selected_Month++;
  154.       }
  155.    }
  156.    else {
  157.       if (Selected_Month == 0) {
  158.          Selected_Month = 11;
  159.          Selected_Year--;
  160.       }
  161.       else {
  162.          Selected_Month--;
  163.       }
  164.    }
  165.    Make_Calendar(Selected_Year, Selected_Month);
  166.    document.when.month.selectedIndex = Selected_Month;
  167.    document.when.year.value = Selected_Year;
  168. }
  169.  
  170. </script>
  171. <!-- Step 2: Insert the below into the <body> section of your page where you wish the calendar to appear: -->
  172. <div id=NavBar style="position:relative;width:286px;top:5px;" align="left">
  173. <form name="when"><table>
  174. <tr>
  175.    <td><input type="button" value="<-- Last" onClick="Skip('-')"></td>
  176.    <td> </td>
  177.    <td><select name="month" onChange="On_Month()">
  178.  
  179. <script language="JavaScript1.2">
  180. if (ie4||ns6){
  181.    for (j=0;j<Month_Label.length;j++) {
  182.       document.writeln('<option value=' + j + '>' + Month_Label[j]);
  183.    }
  184. }
  185. </script>
  186.  
  187.        </select>
  188.    </td>
  189.    <td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td>
  190.    <td> </td>
  191.    <td><input type="button" value="Next -->" onClick="Skip('+')"></td>
  192. </tr></table></form></div>
  193. <div id=Calendar style="position:relative;width:238px;top:-2px;" align="left"></div>
  194. <!-- Step 3: Last but not least, add the following to the <body> tag itself, like so: -->
  195. <body onLoad="Defaults()">
  196. <!-- END OF SCRIPT -->
  197. <!/SCRIPT>
  198.  
  199. <!PREVIEW>
  200. <!-- START OF SCRIPT -->
  201.  
  202. <!-- Step 1: Insert the below into the <head> section of your page: -->
  203. <script language="JavaScript">
  204.  
  205. /*
  206. Dynamic Calendar II (By Jason Moon at http://www.jasonmoon.net)
  207. Permission granted to Dynamicdrive.com to include script in archive
  208. For this and 100's more DHTML scripts, visit http://dynamicdrive.com
  209. */
  210.  
  211. var ns6=document.getElementById&&!document.all
  212. var ie4=document.all
  213.  
  214. var Selected_Month;
  215. var Selected_Year;
  216. var Current_Date = new Date();
  217. var Current_Month = Current_Date.getMonth();
  218.  
  219. var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
  220. var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
  221.  
  222. var Current_Year = Current_Date.getYear();
  223. if (Current_Year < 1000)
  224. Current_Year+=1900
  225.  
  226.  
  227. var Today = Current_Date.getDate();
  228.  
  229. function Header(Year, Month) {
  230.  
  231.    if (Month == 1) {
  232.    Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
  233.    }
  234.    var Header_String = Month_Label[Month] + ' ' + Year;
  235.    return Header_String;
  236. }
  237.  
  238.  
  239.  
  240. function Make_Calendar(Year, Month) {
  241.    var First_Date = new Date(Year, Month, 1);
  242.    var Heading = Header(Year, Month);
  243.    var First_Day = First_Date.getDay() + 1;
  244.    if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
  245.        ((Days_in_Month[Month] == 30) && (First_Day == 7))) {
  246.       var Rows = 6;
  247.    }
  248.    else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
  249.       var Rows = 4;
  250.    }
  251.    else {
  252.       var Rows = 5;
  253.    }
  254.  
  255.    var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">';
  256.  
  257.    HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>';
  258.  
  259.    HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>';
  260.  
  261.    HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>';
  262.  
  263.    var Day_Counter = 1;
  264.    var Loop_Counter = 1;
  265.    for (var j = 1; j <= Rows; j++) {
  266.       HTML_String += '<tr ALIGN="left" VALIGN="top">';
  267.       for (var i = 1; i < 8; i++) {
  268.          if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {
  269.             if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {
  270.                HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';
  271.             }
  272.             else {
  273.                HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Day_Counter + '</td>';
  274.             }
  275.             Day_Counter++;    
  276.          }
  277.          else {
  278.             HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';
  279.          }
  280.          Loop_Counter++;
  281.       }
  282.       HTML_String += '</tr>';
  283.    }
  284.    HTML_String += '</table></td></tr></table>';
  285.    cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
  286.    cross_el.innerHTML = HTML_String;
  287. }
  288.  
  289.  
  290. function Check_Nums() {
  291.    if ((event.keyCode < 48) || (event.keyCode > 57)) {
  292.       return false;
  293.    }
  294. }
  295.  
  296.  
  297.  
  298. function On_Year() {
  299.    var Year = document.when.year.value;
  300.    if (Year.length == 4) {
  301.       Selected_Month = document.when.month.selectedIndex;
  302.       Selected_Year = Year;
  303.       Make_Calendar(Selected_Year, Selected_Month);
  304.    }
  305. }
  306.  
  307. function On_Month() {
  308.    var Year = document.when.year.value;
  309.    if (Year.length == 4) {
  310.       Selected_Month = document.when.month.selectedIndex;
  311.       Selected_Year = Year;
  312.       Make_Calendar(Selected_Year, Selected_Month);
  313.    }
  314.    else {
  315.       alert('Please enter a valid year.');
  316.       document.when.year.focus();
  317.    }
  318. }
  319.  
  320.  
  321. function Defaults() {
  322.    if (!ie4&&!ns6)
  323.    return
  324.    var Mid_Screen = Math.round(document.body.clientWidth / 2);
  325.    document.when.month.selectedIndex = Current_Month;
  326.    document.when.year.value = Current_Year;
  327.    Selected_Month = Current_Month;
  328.    Selected_Year = Current_Year;
  329.    Make_Calendar(Current_Year, Current_Month);
  330. }
  331.  
  332.  
  333. function Skip(Direction) {
  334.    if (Direction == '+') {
  335.       if (Selected_Month == 11) {
  336.          Selected_Month = 0;
  337.          Selected_Year++;
  338.       }
  339.       else {
  340.          Selected_Month++;
  341.       }
  342.    }
  343.    else {
  344.       if (Selected_Month == 0) {
  345.          Selected_Month = 11;
  346.          Selected_Year--;
  347.       }
  348.       else {
  349.          Selected_Month--;
  350.       }
  351.    }
  352.    Make_Calendar(Selected_Year, Selected_Month);
  353.    document.when.month.selectedIndex = Selected_Month;
  354.    document.when.year.value = Selected_Year;
  355. }
  356.  
  357. </script>
  358. <!-- Step 2: Insert the below into the <body> section of your page where you wish the calendar to appear: -->
  359. <div id=NavBar style="position:relative;width:286px;top:5px;" align="left">
  360. <form name="when"><table>
  361. <tr>
  362.    <td><input type="button" value="<-- Last" onClick="Skip('-')"></td>
  363.    <td> </td>
  364.    <td><select name="month" onChange="On_Month()">
  365.  
  366. <script language="JavaScript1.2">
  367. if (ie4||ns6){
  368.    for (j=0;j<Month_Label.length;j++) {
  369.       document.writeln('<option value=' + j + '>' + Month_Label[j]);
  370.    }
  371. }
  372. </script>
  373.  
  374.        </select>
  375.    </td>
  376.    <td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td>
  377.    <td> </td>
  378.    <td><input type="button" value="Next -->" onClick="Skip('+')"></td>
  379. </tr></table></form></div>
  380. <div id=Calendar style="position:relative;width:238px;top:-2px;" align="left"></div>
  381. <!-- Step 3: Last but not least, add the following to the <body> tag itself, like so: -->
  382. <body onLoad="Defaults()">
  383. <!-- END OF SCRIPT -->
  384. <!/PREVIEW>
  385.  
  386. <!RELATED>NONE<!/RELATED>